<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>PCM player</title>
</head>

<body>
  <div id="container" style="width: 400px; margin: 0 auto;">
    <button onclick="loadPCM()">PlayPCM</button>
    <input type="range" max="1" value="0.1" min="0" id="range" onchange="changeVolume(event)" step="0.1"><br />
    <button onclick="pause()">PausePlaying</button>
    <button onclick="continuePlay()">ContinuePlaying</button>
  </div>

  <script src="../dist/index.js"></script>
  <script>
    let player
    window.loadPCM = function loadPCM() {
      var socketURL = 'ws://23.94.99.218:8899';
      // 这是我搭载自己服务器上的server端，用来接收pcm数据
      // 如果起了example里面的本地server端，改成对应的ws地址就行了
      // var socketURL = 'wss://pkjy.xyz/websocket';

      player = new PCMPlayer({
        inputCodec: 'Int16',
        channels: 2,
        sampleRate: 44100,
        flushTime: 200
      });

      var ws = new WebSocket(socketURL);
      ws.binaryType = 'arraybuffer';
      ws.addEventListener('message', function (event) {
        // 可以传 ArrayBuffer 或者 任意TypedArray
        player.feed(event.data);
      });
    }

    window.changeVolume = function changeVolume(e) {
      player.volume(document.querySelector('#range').value)
    }
    window.pause = async function pause() {
      await player.pause()
    }
    window.continuePlay = function continuePlay() {
      player.continue()
    }
  </script>
</body>

</html>
